<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>小猪童鞋的小窝</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Bodo - Simple One Page Personal" name="description">
<meta content="BdgPixel" name="author">
<!--Fav-->
<link href="images/favicon.ico" rel="shortcut icon">

<!--styles-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">

<!--fonts google-->
<!--<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>-->

<!--[if lt IE 9]>
   <script type="text/javascript" src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<!--PRELOADER-->
<div id="preloader">
  <div id="status">
	<img alt="logo" src="images/logo-big.png">
  </div>
</div>
<!--/.PRELOADER END-->

<!--HEADER -->
<div class="header">
  <div class="for-sticky">
	<!--LOGO-->
	<div class="col-md-2 col-xs-6 logo">
	  <a href="index.html"><img alt="logo" class="logo-nav" src="images/logo.png"></a>
	</div>
	<!--/.LOGO END-->
  </div>
  <div class="menu-wrap">
	<nav class="menu">
	  <div class="menu-list">
		<a data-scroll="" href="#home" class="active">
		  <span>Home 小窝</span>
		</a>
		<a data-scroll="" href="#about">
		  <span>About 关于</span>
		</a>
		<a data-scroll="" href="#work">
		  <span>Work 工作</span>
		</a>
		 <a data-scroll="" href="#services">
		  <span>Services 服务</span>
		</a>
		<a data-scroll="" href="#employement">
		  <span>Employement 就业</span>
		</a>
		<a data-scroll="" href="#skill">
		  <span>Skills 技能</span>
		</a>
		<a data-scroll="" href="#education">
		  <span>Education 教育</span>
		</a>
		<a data-scroll="" href="#testimonial">
		  <span>Motto 格言</span>
		</a>
		<a data-scroll="" href="#blog">
		  <span>Blog 博客</span>
		</a>
		<a data-scroll="" href="#contact">
		  <span>Contact 联系</span>
		</a>
	  </div>
	</nav>
	<button class="close-button" id="close-button">Close Menu</button>
  </div>
  <button class="menu-button" id="open-button">
	<span></span>
	<span></span>
	<span></span>
  </button><!--/.for-sticky-->
</div>
<!--/.HEADER END-->

<!--CONTENT WRAP-->
<div class="content-wrap">
  <!--CONTENT-->
  <div class="content">
	<!--HOME-->
	<section id="home">
	  <div class="container">
		<div class="row">
		  <div class="wrap-hero-content">
			  <div class="hero-content">
				<h1>Hello</h1>
				<br>
				<span class="typed"></span>
			  </div>
		  </div>
		  <div class="mouse-icon margin-20">
			<div class="scroll"></div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.HOME END-->

	<!--ABOUT-->
	<section id="about">
	  <div class="col-md-6 col-xs-12 no-pad">
		<div class="bg-about"></div>
	  </div>
	  <div class="col-md-6 col-sm-12 col-xs-12 white-col">
		<div class="row">
		  <!--OWL CAROUSEL2-->
		  <div class="owl-carousel2">
			<div class="col-md-12">
			  <div class="wrap-about">
				<div class="w-content">
				  <p class="head-about">
					写作是一种习惯，但代码是一种喜欢。她将伴随我的一生，设计模式、数据结构与算法、底层基础架构、框架源码，那些我深爱的，我终将和她们一起成长。这注定一路孤独坎坷，一路悲欢离合，起起落落，盼望诸君，务必要惊艳了时光！
				  </p>
				  
				  <h5 class="name">
					小猪童鞋
				  </h5>
				  <img alt="signature" src="images/signature.png">
				</div>
			  </div>
			</div>
		  
			<div class="col-md-12 col-sm-12 col-xs-12 white-col">
			  <div class="row">
				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
				  <div class="wrap-about">
					<table class="w-content">
					  <tr>
						<td class="title">Name </td>
						<td class="break">:</td>
						<td> Piggy Icanci</td>
					  </tr>
					  <tr>
						<td class="title">Phone </td>
						<td class="break">:</td>
						<td> +86 1525 2067 235</td>
					  </tr>
					  <tr>
						<td class="title">Email </td>
						<td class="break">:</td>
						<td> icanci@foxmail.com</td>
					  </tr>
					  <tr>
						<td class="title">Address </td>
						<td class="break">:</td>
						<td> Suzhou Jiangsu China</td>
					  </tr>
					  <tr>
						<td class="title">Hobby </td>
						<td class="break">:</td>
						<td> Coding、Reading、Running</td>
					  </tr>
					  <tr>
						<td class="title">Wechat</td>
						<td class="break">:</td>
						<td> qz1845666903</td>
					  </tr>
					  <tr>
					  	<td class="title">Q Q</td>
						<td class="break">:</td>
						<td> 1845666903</td>
					  </tr>
					</table>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		  <!--/.OWL CAROUSEL2 END-->
		</div>
	  </div>
	</section>
	<!--/.ABOUT END-->

	<!--WORK-->
	<section class="grey-bg mar-tm-10" id="work">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Work 工作</span>
			</h3>
			<p class="content-detail">
			  作为一个准大四Dog，手上的工作尽皆是找工作，学习是一种永远、每时每刻都要执行的操作。它甚至已经深深印刻在我的脑海里——因为我深知自己学识浅薄。所以药不能停，即使不真实的头发让我感到尴尬，也无所畏惧。<br><br>
			  如果每一天可以看看书，做做题目，整理一些自己的笔记，然后做一做自己想做的小项目，并且认认真真的取经，闲暇的时候补一补天文地理，再有一只自己的猫，那确实是人间值得不过了。<br><br>
			  但是每天的效率确实让自己感到忧虑，日子往往在此变得暴躁，然后一笑而过，毕竟要开开心心的。未来还有好多事情等着我去做。<br><br>
			  元浮人间淆杂景，揽春心，理惊鸿！
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<!--PORTFOLIO IMAGE-->
			<ul class="portfolio-image">
			  <li class="col-md-6">
				<a href="images/bw-1.png"><img alt="image" src="images/bw-1.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					   <p class="desc">My Resume</p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-2.png"><img alt="image" src="images/bw-2.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Pangirutan
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-3.png"><img alt="image" src="images/bw-3.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Black Mug
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-4.png"><img alt="image" src="images/bw-4.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Notebook Mockup
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-5.png"><img alt="image" src="images/bw-5.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Presentation
					  </p>  
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-6.png"><img alt="image" src="images/bw-6.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Letter Branding
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			</ul>
			<!--/.PORTFOLIO IMAGE END-->
		  </div>
		</div>
	  </div>
	</section>
	<!--/.WORK END-->

	<!--SERVICES-->
	<section class="white-bg" id="services">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Services 服务</span>
			</h3>
			<p class="content-detail">
			  不想说自己是一个收藏家，但是自己在大学三年已经收藏了好多好东西，你想学习的我尽皆有，你想安装的软件我也有，曾经学妹戏言：“没有学长装不上的软件！”。实在夸张，毕竟软件无数，常用的皆可操作。 不仅仅局限于此，做人与时间管理、资源管理都是必修课。
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<div class="row">
			  <ul class="listing-item">
				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  c
					</h3>
					<p class="head-sm">
					  Learning Route 学习路线
					</p>
					<p class="text-grey">
					  Java 、 前端 、 运维 、 安卓 、 大数据 、 GO 、 Linux/C 、PHP、架构师、算法，应有尽有，玩转自在。
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  b
					</h3>
					<p class="head-sm">
					  WEB DESIGN 网页设计
					</p>
					<p class="text-grey">
					  你应该培养你的审美观，因为你做的东西要符合大部分人的眼光，最起码现在是这样。
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  d
					</h3>
					<p class="head-sm">
					  UI 设计
					</p>
					<p class="text-grey">
					  给出良好的规范，绝佳的PS、PR、AE等的操作，烂熟于心，才能得心应手。
					</p>
				  </div>
				</li>
			  </ul>

			  <ul class="listing-item">
				<li>
				  <div class="col-md-4 col-sm-4">
					<p class="icon-use">
					  f
					</p>
					<p class="head-sm">
					  listen 听
					</p>
					<p class="text-grey">
					  多听，不仅仅包括音乐，还有良言恶语，有时候灵感来自于听。
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  p
					</h3>
					<p class="head-sm">
					  magnet 吸引力
					</p>
					<p class="text-grey">
					  吸引你的老板、你的下属、你的男/女朋友，具有绝对的致命诱惑力——那你应该无比成功。
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  m
					</h3>
					<p class="head-sm">
					  Dream 梦想
					</p>
					<p class="text-grey">
					  周星驰：“人没有梦想，和咸鱼有什么区别！”。
					</p>
				  </div>
				</li>
			  </ul>

			</div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.SERVICES END-->

	<!--EMPLOYEMENT-->
	<section class="grey-bg" id="employement">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Employement 就业</span>
			</h3>
			<p class="content-detail">
			  作为一名在校生，我是是非乐意可以就业的，但是在学校的就业应该也算是一种。
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<div class="row">
			  <ul class="listing-item">
				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2018 - NOW
						</h2>
						<p class="job">
						  硬件组成员
						</p>
						<p class="company">
						  网络协会硬件组
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							维修学校的硬件和软件设备，还是有些挑战性的，毕竟有时候你需要随叫随到。<br>
							你不可以影响到其他同学的正常上课，所以就需要你能够尽快的解决出现的问题，否则老师的吐槽，我想大家都懂。
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>

				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2018 - NOW
						</h2>
						<p class="job">
						 学工助理
						</p>
						<p class="company">
						  电信学院
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							一些杂七杂八的工作，比如拿个快递啦，买个泡面啦，装个打印机啦，发个通知啦，一个一个给学生发消息打电话啦，只要是你可以做的工作，你都应该取去完成，位其职，谋其事。<br>
							有时候老师们有一些好吃的好喝的，那还是不需要客气的啦，客气就很见外啦，因为老师们都是很慷慨的。
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>
			  </ul>

			</div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.EMPLOYEMENT END-->

	<!--SKILLS-->
	<section class="white-bg" id="skill">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Skills 技能</span>
			</h3>
			<p class="content-detail">
			  技能是吃饭的，如何你有极其突出的优点，那最好不过，但是如果你没有，那么同行业应该有的，你就必须要有，否则，你就处于劣势。
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<!--SKILLST-->
			<div class="skillst">
			  <div class="skillbar" data-percent="78%">
				<div class="title head-sm">
				  HTML 5
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="91%">
				<div class="title head-sm">
				  Java 基础
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="58%">
				<div class="title head-sm">
				  Mysql
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="83%">
				<div class="title head-sm">
				  Spring MYBATIS SPRINGMVC
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="75%">
				<div class="title head-sm">
				  数据结构和算法
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			</div>
			<!--/.SKILLST END-->
		  </div>
		</div>
	  </div>
	</section>
	<!--/.SKILLS END-->

	<!--EDUCATION-->
	<section class="grey-bg" id="education">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Education 教育</span>
			</h3>
			<p class="content-detail">
			  江苏某大学 非211 非985
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<div class="row">
			  <ul class="listing-item">
				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2017 - NOW
						</h2>
						<p class="job">
						  本科
						</p>
						<p class="company">
						  JUST
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							做一个简单的学生，认认真真，拿拿奖学金最好不过，处理好自己的工作，也是添加一份完美和经历。
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>
			  </ul>
			</div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.EDUCATION END-->

	<!--TESTIMONIAL-->
	<section id="testimonial">
	  <div class="container">
		<div class="row wrap-testimonial">
		  <div class="col-md-10 col-md-offset-1">
			<div class="owl-carousel">
			  <div class="list-testimonial">
				<div class="content-testimonial">
				  <h3 class="testi">
					“ 所有让你痛不欲生的，必定使你更加坚强。 ”
				  </h3>
				  <p class="people">
					小猪童鞋 
				  </p>
				</div>
			  </div>
			  <div class="list-testimonial">
				<div class="content-testimonial">
				  <h3 class="testi">
					“ 我将带头冲锋！人在塔在！”
				  </h3>
				  <p class="people">
					德玛西亚之力
				  </p>
				</div>
			  </div>
			  <div class="list-testimonial">
				<div class="content-testimonial">
				  <h3 class="testi">
					“ 没有想象力，没有想象力，是罪魁；没有想象力，灵感在墓地里沉睡！ ”
				  </h3>
				  <p class="people">
					许嵩 
				  </p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <div class="mask-testimonial"></div>
	</section>
	<!--/.TESTMONIAL END-->

	<!--BLOG-->
	<section class="grey-bg" id="blog">
	  <div class="container">
		<div class="row">
		  <div class="col-md-12">
			<h3 class="title-small-center text-center">
			  <span>Blog 博客</span>
			</h3>
			<div class="row">
			  <div class="col-md-6 col-md-offset-3">
				<p class="content-details text-center">
				  能够每天记录一下自己的日常学习和生活，留待将来看自己，管他今日是辉煌还是狗。 
				</p>
			  </div>
			</div>
			<!--GRID BLOG-->
			<div class="grid">
			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog-1" class="img-circle text-center" src="images/blog-1.png">
				  <p class="subtitle fancy">
					<span>05/30/2020</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  大学开学那天
					</h3>
				  </a>
				  <p class="content-blog">
					那时候多么的喜悦哇，每天快乐开黑玩耍，虽然技术菜，但是玩的爽啊！一转眼都好多年了。
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				 <img alt="blog-4" class="img-circle text-center" src="images/blog-4.jpg">
				 <p class="subtitle fancy">
					<span>04/22/2020</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  纪念啊纪念
					</h3>
				  </a>
				  <p class="content-blog">
					我只相信你是出了远门，总有一天会回来的。
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog6" class="img-circle text-center" src="images/blog-6.jpg">
				  <p class="subtitle fancy">
					<span>08/11/2019</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  留校
					</h3>
				  </a>
				  <p class="content-blog">
				   学习前端，做啥招新网站，自己被卖的不轻。实在太蠢。
				  </p>
				</div>
			  </div>
			  
			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog2" class="img-circle text-center" src="images/blog-2.jpg">
				  <p class="subtitle fancy">
					<span>08/03/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  没看过山也没看过水
					</h3>
				  </a>
				  <p class="content-blog">
					我看过的，是热，与干不完的活。
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog5" class="img-circle text-center" src="images/blog-5.jpg">
				  <p class="subtitle fancy">
					<span>01/13/2018</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  寒假
					</h3>
				  </a>
				  <p class="content-blog">
					不是过年的吗?多放一点鞭炮。那种味道还是很好闻的哈哈哈哈哈。
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog-3" class="img-circle text-center" src="images/blog-3.jpg">
				  <p class="subtitle fancy">
					<span>01/03/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  高四
					</h3>
				  </a>
				  <p class="content-blog">
					复读的时光，多难捱，就是一种举目无亲、双手无措的孤独感。
				  </p>
				</div>
			  </div>                  

			</div>
			<!--/.GRID BLOG END-->
		  </div>
		</div>
	  </div>
	</section>
	<!--/.BLOG END-->

	<!--CONTACT-->
	<section id="contact" class="white-bg">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Contact 联系</span>
			</h3>
			<p class="content-detail">
			  没有服务器啦，我就自己放上去做做样子，在上面有我的联系方式。当然，这里也有。
			</p>

		  </div>
		  <div class="col-md-9 content-right">
			<form>
			  <div class="group">
				<input required="" type="text" readonly="readonly">小猪童鞋<span class="highlight"></span><span class="bar"></span><label>Name</label>
			  </div>
			  <div class="group">
				<input required="" type="email" readonly="readonly">icanci@foxmail.com<span class="highlight"></span><span class="bar"></span><label>Email</label>
			  </div>
			  <div class="group">
				<textarea required="" readonly="readonly"></textarea>欢迎到访我的小窝，谢谢！<span class="highlight"></span><span class="bar"></span><label>Message</label>
			  </div>
			  <input id="sendMessage" name="sendMessage" type="submit" value="Send Message 发送">
			</form>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.CONTACT END-->
	
	<!--FOOTER-->
	<footer>
	  <div class="footer-top">
		<ul class="socials">
		  <li class="facebook">
			<a href="http://wpa.qq.com/msgrd?v=3&uin=1845666903&site=qq&menu=yes" data-hover="QQ" target="_blank">QQ</a>
		  </li>
		  <li class="twitter">
			<a href="https://gitee.com/icanci" data-hover="Gitee" target="_blank">Gitee</a>
		  </li>
		  <li class="gplus">
			<a href="https://www.jianshu.com/u/9159b33be598" data-hover="简书" target="_blank">简书</a>
		  </li>
		</ul>
	  </div>

	  <div class="footer-bottom">
		<div class="container">
		  <div class="row">
			<img src="images/logo-bottom.png" alt="logo bottom" class="center-block" />Copyright &copy; 2019 - 2020.Company name All rights reserved.
		  </div>
		</div>
	  </div>
	</footer>
	<!--/.FOOTER-END-->

  <!--/.CONTENT END-->
  </div>
<!--/.CONTENT-WRAP END-->
</div>


<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.appear.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/classie.js" type="text/javascript"></script>
<script src="js/owl.carousel.min.js" type="text/javascript"></script>
<script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/masonry.js" type="text/javascript"></script>
<script src="js/smooth-scroll.min.js" type="text/javascript"></script>
<script src="js/typed.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>